<script setup lang="ts">
import { ElLoading, ElMessage, ElMessageBox, ElMessageBoxOptions, ElSpace, ElTable, ElTableColumn } from 'element-plus';
import clientHelper from '../../services/clientHelper';
import { useClient } from '../../constants/client';
import { ReverseProxyClient, ProxyConfigSimple, ProxyConfigViewModel } from '../../services/client';
import { onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import NtmProxyConfigPreview from '../../components/basic/NtmProxyConfigPreview.vue'

const errorHandler = clientHelper.useRequestExceptionHandler(ElMessage, (opts: ElMessageBoxOptions) => {
    ElMessageBox(opts);
});

const proxyConfigClient = useClient(ReverseProxyClient)
const configs = ref<ProxyConfigSimple[]>([])
const detail = ref<ProxyConfigViewModel | undefined>(undefined);

const refresh = () => {

    const loading = ElLoading.service();
    proxyConfigClient.listAll().then(result => {
        if (result) {
            configs.value = [...result];
        }
    }).catch(errorHandler).finally(() => {
        loading.close()
    })
}

const configPreview = ref(false);


const loadDetail = (revisionId: string) => {
    return proxyConfigClient.detail(revisionId).then(
        result => {
            if (result) {
                return result
            }
        }
    )
}

const showDetail = (revisionId?: string) => {
    if (!revisionId) {
        ElMessage.error('无版本修订号')
    }

    const loading = ElLoading.service();
    loadDetail(revisionId!).then(result => {
        detail.value = result;
        configPreview.value = true;
    }).catch(errorHandler).finally(() => {
        loading.close();
    })
}

const handleClosed = () => {
    configPreview.value = false;
}

const loadCurrent = () => {
    const loading = ElLoading.service();
    proxyConfigClient.current().then(config => {
        detail.value = config;
        configPreview.value = true
    }).catch(errorHandler).finally(() => {
        loading.close();
    })
}

const loadLatest = () => {
    const loading = ElLoading.service();
    proxyConfigClient.latest().then(config => {
        detail.value = config;
        configPreview.value = true;
    }).catch(errorHandler).finally(() => {
        loading.close();
    })
}

const publish = () => {
    const loading = ElLoading.service();
    return proxyConfigClient.publish().then(() => {
        ElMessage.success({
            message: '发布成功！'
        })

        refresh();
    }).finally(() => {
        loading.close();
    })
}

const restoreLast = () => {
    const loading = ElLoading.service();
    proxyConfigClient.restoreLast().then(() => {
        ElMessage.success({
            message: '重载最新配置'
        })

        refresh();
    }).catch(errorHandler).finally(() => {
        loading.close();
    })
}

const restore = (revisionId?: string) => {
    if (!revisionId) {
        ElMessage.error({
            message: '无配置修订号'
        })

        return;
    }

    const loading = ElLoading.service();
    proxyConfigClient.restore(revisionId!).then(() => {
        ElMessage.success({
            message: '应用成功！'
        })
    }).catch(errorHandler).finally(() => {
        loading.close();
    })

}

onMounted(() => {
    refresh()
})

</script>

<template>
    <ElRow>
        <ElCol>
            <ElSpace>
                <ElButton type="primary" @click="refresh">
                    <ElIcon>
                        <Search />
                    </ElIcon>查询
                </ElButton>
                <ElButton type="default" @click="loadLatest">
                    最新的配置
                </ElButton>
                <ElButton type="danger" @click="publish">
                    发布最新配置
                </ElButton>
                <ElButton type="default" @click="loadCurrent">
                    当前已应用
                </ElButton>
                <ElButton type="danger" @click="restoreLast">
                    重载上次应用配置
                </ElButton>
            </ElSpace>
        </ElCol>
    </ElRow>
    <ElRow>
        <ElCol>
            <ElTable :data="configs">
                <ElTableColumn prop="id" label="Id"></ElTableColumn>
                <ElTableColumn prop="revisionId" label="Revision Id"></ElTableColumn>
                <ElTableColumn prop="created" label="Created"></ElTableColumn>
                <ElTableColumn label="Operations">
                    <template #default="scope: { row: ProxyConfigSimple }">
                        <ElButton @click="() => showDetail(scope.row.revisionId)">
                            详情
                        </ElButton>
                        <ElButton @click="() => restore(scope.row.revisionId)">
                            应用
                        </ElButton>
                    </template>
                </ElTableColumn>
            </ElTable>
            <ElDrawer v-model="configPreview" title="配置详情" size="80%" @closed="handleClosed">
                <NtmProxyConfigPreview :data="detail" />
            </ElDrawer>
        </ElCol>
    </ElRow>
</template>